<template>
  <div class="flex items-baseline text-red-500" :class="`size-${size}`">
    <i class="icon-money price-icon">￥</i>
    <b class="price-text">{{ price[0] }}</b>
    <template v-if="showDecimal">
      <span class="decimal">.</span>
      <span class="decimal-text">{{ price[1] }}</span>
    </template>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
const props = defineProps<{
  price: number | string;
  size?: "small" | "default" | "large";
}>();
const price = ref(["", ""]);
const showDecimal = ref(false);
watch(
  () => props.price,
  (newVal) => {
    price.value = newVal.toString().split(".");
    showDecimal.value = price.value[1] !== undefined;
  }
);
onMounted(() => {
  price.value = props.price.toString().split(".");
  showDecimal.value = price.value[1] !== undefined;
});
</script>
<style lang="scss" scoped>
:root {
  --icon-size: 12px;
  --price-text-size: 16px;
  --decimal-size: 14px;
  --decimal-text-size: 15px;
}

.price-icon {
  font-size: var(--icon-size);
}
.price-text {
  font-size: var(--price-text-size);
}
.decimal {
  font-size: var(--decimal-size);
}
.decimal-text {
  font-size: var(--decimal-text-size);
}
.size-small {
  font-weight: 400;
}
.size-default {
  font-weight: 600;
  --icon-size: 18px;
  --price-text-size: 24px;
}
.size-large {
  font-weight: 600;
  --icon-size: 20px;
  --price-text-size: 28px;
  --decimal-size: 21px;
  --decimal-text-size: 23px;
}
</style>
